<template>
  <FormView
    v-model="entity"
    :title="entity.id ? '修改预算管理' : '新建预算管理'"
    :toolbar-attrs="{ buttons: ['back', 'save', 'cancel'] }"
    :toolbar-listeners="{ save: persist }">
    <FormHolder ref="form" label-width="110px" :model="entity">
      <FormItemGroup block-title="基本信息">
        <FormInputNumber v-model="entity.year" prop="year" label="所属年度" :max="9999" required />
        <FormInput
          v-model="entity.number"
          prop="number"
          label="预算序号"
          required
          max-length="32"
          :rules="numberRules" />
        <FormSelect v-model="entity.type" prop="type" required label="预算分类" dict-type="budget_type" />
        <FormInputNumber v-model="entity.amount" prop="amount" label="预算金额" :max="999999999" required />

        <FormTreeSelect
          v-model="entity.expenditureId"
          :span="24"
          label="开支单位"
          :options="deptTreeList"
          prop="expenditureId"
          required />
        <FormTreeSelect
          v-model="entity.executionId"
          :span="24"
          label="执行单位"
          :options="deptTreeList"
          prop="executionId"
          required />
        <FormInput v-model="entity.liableName" prop="liableName" :span="12" label="责任人" readonly required>
          <template #append>
            <slot name="append">
              <ElButton type="button" style="padding-right: 10px" @click="isShowUserPicker = true">选择</ElButton>
            </slot>
          </template>
        </FormInput>
        <FormDatePicker v-model="entity.completionDate" label="完成时间" prop="completionDate" />

        <FormRadioGroup
          v-model="entity.limitThreshold"
          label="限制合同执行"
          required
          prop="limitThreshold"
          classic
          radio-type="radio"
          :options="[
            { label: '否', value: '0' },
            { label: '是', value: '1' }
          ]" />
        <FormTextarea v-model="entity.remarks" rows="3" prop="remarks" label="备注" max-length="3000" />
      </FormItemGroup>
      <FormItemGroup :gutter="0" block-title="附件信息">
        <UploadPage
          v-if="entity.unid"
          ref="UploadPage"
          style="padding: 0"
          :unique-code="entity.unid"
          model="purchaseOrder"
          classify="purchaseOrder" />
      </FormItemGroup>
    </FormHolder>
    <!-- 选择用户 -->
    <UserPicker
      v-if="isShowUserPicker"
      :reserve-position-on-close="false"
      close-on-click-modal
      :visible.sync="isShowUserPicker"
      @confirm="onConfirmUser" />
  </FormView>
</template>

<script>
  import { addObj, putObj, getObj, create } from '@/api/asset/fyassetbudget'
  import form from '@/vue/mixin/form'
  import { fetchTree } from '@/api/admin/dept'

  export default {
    name: 'BudgetForm',
    relativeViewId: 'BudgetView',
    mixins: [form],
    data() {
      const validateBudget = (rule, value, callback) => {
        if (value !== '') {
          // const reg = /[\u4e00-\u9fa5]/g
          const reg = /^[a-zA-Z0-9_|.|-]+$/
          if (!reg.test(value)) {
            callback(new Error('预算序号只能包含数字、字母、下线划、中线划和小数点'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }

      return {
        entity: {
          amount: 0,
          completionDate: null,
          createBy: '',
          createId: 0,
          createTime: '',
          deptFullname: '',
          deptId: 0,
          executionFullname: '',
          executionId: null,
          expenditureFullname: '',
          expenditureId: null,
          id: '',
          liableId: '',
          liableName: '',
          limitThreshold: '0',
          number: null,
          remarks: '',
          type: '',
          unid: '',
          updateBy: '',
          updateTime: '',
          year: null
        },
        deptTreeList: [],
        numberRules: [{ validator: validateBudget, trigger: 'blur' }],
        isShowUserPicker: false
      }
    },
    created() {
      this.init()
    },
    methods: {
      create,
      load: getObj,
      save: addObj,
      update: putObj,
      async init() {
        const res = await fetchTree()
        this.deptTreeList = res.data.data
      },
      onConfirmUser(users) {
        const user = users[0]
        this.entity.liableId = user.id
        this.entity.liableName = user.name
      }
    }
  }
</script>
